/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */

//  任务列表页面底部导航


<template>
  <ul class="content">
    <mt-actionsheet
      v-if="sheetVisible"
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <li 
      v-for="(item,index) in navData" :key="index"
      :style="{width: 100/navData.length + '%'}"
      @click="item.children ? showChildNav(item.id) : changeNav(item.id)"
      :class="['nav-item', item.id == selectedId ? 'active' : '']"
    >
      {{item.text}}
    </li>
    <div class="line":style="{width: lineStyle.width, left: lineStyle.left}"></div>
  </ul>
</template>

<script>
import { treeToArray } from "../../util/util.js";
import { Actionsheet } from "mint-ui";

export default {
  props: {
    navData: {
      type: Array,
      required: true,
      default: []
    },
    selectedId: {
      type: [String, Number],
      required: true,
      default: null
    },
    handlerNav: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      sheetVisible: false,
      actions: [],
      type: false, //是否是二次触发
    };
  },
  computed: {
    lineStyle: function() {
      //顶部线条width left
      if (!this.navData || this.navData.length < 1) return {};
      if (!this.selectedIdArr || this.selectedIdArr.length < 1) return {};
      let r = {};
      const n = this.navData;
      const a = this.selectedIdArr;
      const b = n.map(item => String(item.id)); //一级菜单id数组
      const c = b.indexOf(String(a[0]));
      r.width = 100 / n.length + "%";
      r.left = (100 / n.length) * c + "%";
      return r;
    },
    arrayNavData: function() {
      //数组结构菜单数据
      if (!this.navData || this.navData.length < 1) return [];
      const tree = this.navData;
      let r = treeToArray(tree);
      return r;
    },
    selectedIdArr: function() {
      ////选中的层级菜单 [第一级, 第二级, 第三级, ...]
      if (!this.navData || this.navData.length < 1) return [];
      const a = this.arrayNavData;
      const s = this.selectedId;
      let r = [];
      const change = pid => {
        var si = a.filter(item => item.id == pid)[0];
        if (!si) return;
        r.unshift(si.id);
        if (si.pid) {
          //不是顶级菜单
          change(si.id);
        }
      };
      change(s);
      return [r];
    }
  },
  mounted() {},
  methods: {
    showChildNav(id) {
      const that = this;
      const s = id;
      const a = this.arrayNavData;
      const items = a.filter(i => i.pid == s);
      let r = [];
      items.map(item => {
        r.push({
          name: item.text,
          method: () => that.changeNav(item.id)
        });
      });
      this.actions = r;
      //显示子级导航
      this.sheetVisible = true;
    },
    changeNav(id) {
      //改变导航
      this.handlerNav(id);
      this.actions = [];
      this.sheetVisible = false;
      this.type = true;
    },
  },
  components: { "mt-actionsheet": Actionsheet }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.content {
  width: 100%;
  height: 100%;
}
.nav-item {
  background: #fff;
  float: left;
  box-sizing: border-box;
  color: @gray;
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line {
  webkit-transition: top 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    color 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  transition: top 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    color 0.3s cubic-bezier(0.35, 0, 0.25, 1),
    width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  will-change: top, left, width, color;
  position: absolute;
  border: 1px solid @primary;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-sizing: border-box;
}
.active{
  color: @primary;
}
</style>
